<template>
  <div class="channel-management">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="上游渠道" name="upstream">
        <Upstream />
      </el-tab-pane>
      <el-tab-pane label="下游渠道" name="downstream">
        <Downstream />
      </el-tab-pane>
      <el-tab-pane label="渠道监控" name="monitor">
        <ChannelMonitor />
      </el-tab-pane>
      <el-tab-pane label="质量分析" name="quality">
        <ChannelQuality />
      </el-tab-pane>
      <el-tab-pane label="渠道评估" name="evaluation">
        <ChannelEvaluation />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Upstream from './Upstream.vue'
import Downstream from './Downstream.vue'
import ChannelMonitor from './ChannelMonitor.vue'
import ChannelQuality from './ChannelQuality.vue'
import ChannelEvaluation from './ChannelEvaluation.vue'

const route = useRoute()
const router = useRouter()

const activeTab = ref('upstream')

// 处理标签页切换
const handleTabChange = (tabName: string) => {
  router.push({ query: { ...route.query, tab: tabName } })
}

// 初始化标签页
const initTab = () => {
  const tab = route.query.tab as string
  if (tab && ['upstream', 'downstream', 'monitor', 'quality', 'evaluation'].includes(tab)) {
    activeTab.value = tab
  }
}

onMounted(() => {
  initTab()
})
</script>

<style scoped>
.channel-management {
  padding: 20px;
}

:deep(.el-tabs__header) {
  margin-bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .channel-management {
    padding: 10px;
  }
  
  :deep(.el-tabs__item) {
    font-size: 12px;
    padding: 0 10px;
  }
}
</style>